<template>
    <div class='lineStyleContainer'>
        <el-radio-group v-model="lineMode" @change="onSelLineMode($event)">
            <el-radio label="none" size="large" border style="width:100%;">无</el-radio>
            <el-radio label="solid" size="large" border style="width:100%;">实线</el-radio>
            <el-radio label="dashline" size="large" border style="width:100%;">虚线</el-radio>
        </el-radio-group>
        <el-row style="font-size:12px;">
            <el-col :span="24">
                <el-select v-if="lineMode == 'dashline'" v-model="dashLineMode" @change="onSelChgDashLineMode($event)"
                    style="width:90%;">
                    <el-option v-for="item in lineModeItemArr" :key="item.id" :label="item.propValue" :value="item.id"
                        style="width:100%;">
                        <img :src="item.imageUrl" alt="" style="width: 20px; height: 20px; margin-right: 5px;">
                        {{ item.label }}
                    </el-option>
                </el-select>
            </el-col>
        </el-row>

        <el-row type="flex" justify="space-between" style="font-size:12px;">
            <el-col :span="4">
                <label for="linecolorid">颜&nbsp;&nbsp;&nbsp;色</label>
            </el-col>
            <el-col :span="20">
                <el-color-picker id="linecolorid" v-model="color" show-alpha :predefine="predefineColors"
                    @change="onSelColor($event)" style="width:100px;">
                </el-color-picker>
            </el-col>
        </el-row>

        <el-row type="flex" justify="space-between" style="font-size:12px">
            <el-col :span="4">
                <label for="linewidid">线&nbsp;&nbsp;&nbsp;宽</label>
            </el-col>
            <el-col :span="20">
                <el-select id="linewidid" v-model="lineWidth" @change="onLineWidthSelChg($event)" style="width:60%;">
                    <el-option v-for="item in lineWidthItemArr" :key="item.id" :label="item.propValue" :value="item.id"
                        style="width:100%;">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>

        <el-row type="flex" justify="space-between" style="font-size:12px">
            <el-col :span="4">
                <label for="stArrowID">前端箭头类型</label>
            </el-col>
            <el-col :span="20">
                <el-select id="stArrowID" v-model="stArrow" @change="onSelStArrow($event)" style="width:60%;">
                    <el-option v-for="item in arrowItemArr" :key="item.id" :label="item.propValue"
                        :value="item.propValue" style="width:100%;">
                        <img :src="item.imageUrl" alt="" style="width: 20px; height: 20px; margin-right: 5px;">
                        {{ item.propValue }}
                    </el-option>
                </el-select>
            </el-col>
        </el-row>

        <el-row type="flex" justify="space-between" style="font-size:12px">
            <el-col :span="4">
                <label for="endArrowID">末端箭头类型</label>
            </el-col>
            <el-col :span="20">
                <el-select id="endArrowID" v-model="endArrow" @change="onSelEndArrow($event)" style="width:60%;">
                    <el-option v-for="item in arrowItemArr" :key="item.id" :label="item.propValue"
                        :value="item.propValue" style="width:100%;">
                        <img :src="item.imageUrl" alt="" style="width: 20px; height: 20px; margin-right: 5px;">
                        {{ item.propValue }}
                    </el-option>
                </el-select>
            </el-col>
        </el-row>

        <el-row type="flex" justify="space-between" style="font-size:12px">
            <el-col :span="4">
                <label for="connectStyleID">线连接方&nbsp;&nbsp;&nbsp;式</label>
            </el-col>
            <el-col :span="20">
                <el-select id="connectStyleID" v-model="connectStyle" @change="onSelLineConnectStyle($event)"
                    style="width:60%;">
                    <el-option v-for="item in connStyleItemArr" :key="item.id" :label="item.label"
                        :value="item.propValue" style="width:100%;">
                        <img :src="item.imageUrl" alt="" style="width: 20px; height: 20px; margin-right: 5px;">
                        {{ item.propValue }}
                    </el-option>
                </el-select>
            </el-col>
        </el-row>

    </div>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import lgxcom from '../../script/canvas/common/common.js'
import arrowManager from '../../script/canvas/graph/paintutil/arrowManager';
import utilfuncs from '../../script/canvas/common/tools/utilfuncs';
var funs = utilfuncs.UtilFuncs;

import globalConst from '../../script/canvas/common/globalConst'
var global = globalConst.GlobalConst;

onMounted(() => {
    console.log("line style prop  onMounted");
    initDatas();
})

var onSelLineConnectStyle = function (item) {
    console.log(item);
    var propname = 'line_connect_style';
    var propval = item;
    var cmd = { propname, propval };
    window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
}

var onSelLineMode = function (item) {
    console.log(item);
    var propname = 'linemode';
    var propval = item;
    var cmd = { propname, propval };
    window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
}

var onSelStArrow = function (item) {
    console.log(item);
    var propname = 'arrow';
    var propval = item;
    var cmd = { propname, propval, flag: 0 };
    window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
}

var onSelEndArrow = function (item) {
    console.log(item);
    var propname = 'arrow';
    var propval = item;
    var cmd = { propname, propval, flag: 1 };
    window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
}


var onLineWidthSelChg = function (item) {
    console.log("onLineWidthSelChg" + item);
    let pos = item.indexOf('@');
    var propname = item.substr(0, pos);
    var valLen = item.length - pos - 1;
    var propval = item.substr(pos + 1, valLen);
    var cmd = { propname, propval };
    window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
}

var handleLineWidthInput = function (item) {
    console.log("handleLineWidthInput" + item);
    let val = lineWidth.value;
    console.log("lineWidth:" + lineWidth.value);
    // let pos = item.indexOf('@');
    // var propname = item.substr(0, pos);
    // var valLen = item.length - pos - 1;
    // var propval = item.substr(pos + 1, valLen);
    // var cmd = { propname, propval };
    // window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
}


var onSelChgDashLineMode = function (item) {

}


var onSelColor = function (item) {
    console.log(item);
    var lgxColor = funs.convertRGBAStrToColor(item);
    var propname = 'color';
    var propval = lgxColor.toValue();
    var cmd = { propname, propval };
    window.mainctl.m_pEditINTF.modifyGraphStyle(cmd);
}

//初始化数据，从当前选中图形中获取坐标定义及真实数据
var initDatas = function () {
    console.log("line style initDatas*******************");
    let rst = window.mainctl.m_pGetDataINTF.getLineDefDatas(0);
    if (!rst) {
        return;
    }

    let modeval = rst.lineMode;
    if (modeval == 0) {
        lineMode.value = 'none';
    }
    else if (modeval == 1) {
        lineMode.value = 'solid';
    }
    else if (modeval == 2) {
        lineMode.value = 'dashline';
        dashLineMode.value = "dash_dash";
    }
    lineWidth.value = rst.lineWidth + "px";

    let colorObj = new lgxcom.LGXColor();
    colorObj.setColorByValue(parseInt(rst.color));

    color.value = colorObj.toHexString();

    stArrow.value = rst.stArrowType;
    endArrow.value = rst.endArrowType;
    connectStyle.value = rst.lineVisionType;

    let arrowMng = new arrowManager.LGXArrowManager();
    let list = arrowMng.getArrowDescList();
    if (list && list.length > 0) {
        let validArrowItemArr = [];
        list.forEach(p => {
            let t = { id: '', propValue: p.name, imageUrl: p.imageUrl };
            t.id = 'arrow@' + p.index;
            validArrowItemArr.push(t);
        });
        arrowItemArr.value = validArrowItemArr;
    }
}


const lineMode = ref("solid");
const dashLineMode = ref("dash_dash");
const lineWidth = ref("1px");
const stArrow = ref("0")
const endArrow = ref("0")
const connectStyle = ref("cross")

const connStyleItemArr = ref([
    { id: 'lineConnStyle@1', propValue: 'cross', imageUrl: '/res/icon/lineVision/cross.png', label: '正交' },
    { id: 'lineConnStyle@2', propValue: 'straight', imageUrl: '/res/icon/lineVision/straight.png', label: '直线' },
    { id: 'lineConnStyle@3', propValue: 'curve', imageUrl: '/res/icon/lineVision/curve.png', label: '曲线' }
]);
const arrowItemArr = ref([

]);


const lineModeItemArr = ref([
    { id: 'linemode@0', propValue: 'none', imageUrl: '/res/icon/lineMode/none.png', label: '无'  },
    { id: 'linemode@1', propValue: 'solid', imageUrl: '/res/icon/lineMode/solid.png', label: '实线'  },
    { id: 'linemode@2', propValue: 'dash_dash', imageUrl: '/res/icon/lineMode/dash_dash.png', label: '虚线'  },
    { id: 'linemode@3', propValue: 'dash_dot' , imageUrl: '/res/icon/lineMode/dash_dot.png', label: '短线-点' },
    { id: 'linemode@4', propValue: 'dash_do_dash' , imageUrl: '/res/icon/lineMode/dash_do_dash.png', label: '短线-点-短线' },
]);

const lineWidthItemArr = ref([
    { id: 'linewidth@0', propValue: '0px' },
    { id: 'linewidth@1', propValue: '1px' },
    { id: 'linewidth@2', propValue: '2px' },
    { id: 'linewidth@3', propValue: '3px' },
    { id: 'linewidth@4', propValue: '4px' },
    { id: 'linewidth@5', propValue: '5px' },
    { id: 'linewidth@6', propValue: '6px' },
    { id: 'linewidth@7', propValue: '7px' },
    { id: 'linewidth@8', propValue: '8px' },
    { id: 'linewidth@9', propValue: '9px' },
    { id: 'linewidth@10', propValue: '10px' },
    { id: 'linewidth@11', propValue: '11px' },
    { id: 'linewidth@12', propValue: '12px' },
    { id: 'linewidth@13', propValue: '13px' },
    { id: 'linewidth@14', propValue: '14px' },
    { id: 'linewidth@15', propValue: '15px' }
]);

const color = ref('rgba(255, 69, 0, 0.68)');
const predefineColors = ref(global.sysPreDefColors);

defineExpose({
    initDatas
});
</script>

<style scoped>
.el-tree-node.is-current>.el-tree-node__content {
    background-color: red !important;
}

/* 左侧样式 */


.linewid_com {
    position: relative;
    width: 100px;
    height: 30px;
    top: 0px;
    /* 距离上面50像素 */
    right: 0px;
    bottom: 0px;
    padding: 0px;
    color: #6b778c;
    font-size: 12px;
    font-weight: 600;
    margin-left: 5px;
}

.linewid_label {
    position: relative;
    width: 100px;
    height: 30px;
    top: 0px;
    /* 距离上面50像素 */
    left: 0px;
    bottom: 0px;
    padding: 0px;
    color: #6b778c;
    font-size: 12px;
    font-weight: 600;
    margin-left: 5px;
}

.linecolor_title {
    position: relative;
    width: 295px;
    height: 100px;
    top: 0px;
    /* 距离上面50像素 */
    left: 0px;
    bottom: 0px;
    padding: 0px;
    color: #6b778c;
    font-size: 12px;
    font-weight: 600;
    margin-left: 5px;
}
</style>